<template>
<div class="logistics-list">
    <Form :model="formItem" ref="formItem" :inline="true" action="javascript:void(0)">
        <FormItem>
            <Select v-model="formItem.type" :style="{'width':'140px'}" clearable aria-placeholder="选择平台">
                <Option v-for="item in typelist" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
        </FormItem>
        <FormItem>
            <Select v-model="formItem.shop_id" :style="{'width':'140px'}" clearable aria-placeholder="选择门店">
                <Option v-for="item in shoplist" :value="item.id" :key="item.id">{{ item.shopname }}</Option>
            </Select>
        </FormItem>
        <FormItem>
            <Input v-model="formItem.key" placeholder="输入关键词查找..."></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="renderTable('formItem')">查找</Button>
        </FormItem>
        <FormItem style="float:right">
            <Button style="margin-right: 8px" type="info" @click="syncpdd()">物流信息</Button>
            <Button style="margin-right: 8px" type="success" @click="syncwaywill()">面单信息</Button>
            <Button style="margin-right: 8px" type="error" @click="synctemp()">面单模板</Button>
        </FormItem>
    </Form>
    <div class="action-btn">
        <Button size="small" style="margin-right: 8px" type="error" @click="removeLogistic()">批量删除</Button>
        <Button size="small" style="margin-right: 8px" type="info" @click="showCreateLogistic()">添加物流</Button>
    </div>
    <Table border ref="adlist" :columns="list" :data="tablelist" :loading="dataloading" @on-selection-change="changeData">
        <template slot-scope="{ row }" slot="type">
            <Tag color="green" v-if="row.type == 1">天猫</Tag>
            <Tag color="orange" v-if="row.type == 2">淘宝</Tag>
            <Tag color="red" v-if="row.type == 3">京东</Tag>
            <Tag color="purple" v-if="row.type == 4">拼多多</Tag>
        </template>
        <template slot-scope="{row, index }" slot="address">
            {{ row.country }} - {{ row.province }} - {{ row.city }} - {{ row.district }} - {{ row.detail }}
        </template>
        <template slot-scope="{row, index }" slot="template">
            {{ row.standard_template_name }} - {{ row.standard_template_url }}
        </template>
        <template slot-scope="{ row, index }" slot="action">
            <Button type="info" size="small" style="margin-right: 5px;float:left" @click="showEditLogistics(row.id)">编辑</Button>
            <Button type="error" size="small" @click="remove(index,row.id)">删除</Button>
        </template>
    </Table>
    <!-- 分页 -->
    <div class="table-page">
        <Page size="small" ref="listPage" :total="pages.total" :current="pages.current" :page-size="pages.size" show-elevator show-total @on-change="changePage"></Page>
    </div>

    <!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="添加店铺" width="640" v-model="showModalStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="logistics" ref="logisticsValidate" label-position="right" :label-width="80" :rules="logisticsValidate" action="javascript:void(0)">
            <FormItem label="类型" prop="type">
                <Select v-model="logistics.type" :style="{'width':'240px'}" clearable>
                    <Option v-for="item in typelist" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
            </FormItem>
            <FormItem label="门店" prop="shop_id">
                <Select v-model="logistics.shop_id" :style="{'width':'240px'}" clearable>
                    <Option v-for="item in shoplist" :value="item.id" :key="item.id">{{ item.shopname }}</Option>
                </Select>
            </FormItem>
            <FormItem label="公司名称" prop="logistics_company">
                <Input v-model="logistics.logistics_company" placeholder="输入名称..."></Input>
            </FormItem>
            <FormItem label="公司编码" prop="logistics_id">
                <Input v-model="logistics.logistics_id" placeholder="输入公司编码，从<物流信息>获取到的..."></Input>
            </FormItem>
            <FormItem label="公司代码" prop="logistics_code">
                <Input v-model="logistics.logistics_code" placeholder="输入公司代码，从<物流信息>获取到的..."></Input>
            </FormItem>
            <FormItem label="面单模板名称" prop="standard_template_name">
                <Input v-model="logistics.standard_template_name" placeholder="从<面单模板>获取到的..."></Input>
            </FormItem>
            <FormItem label="面单模板URL" prop="standard_template_url">
                <Input v-model="logistics.standard_template_url" placeholder="从<面单模板>获取到的..."></Input>
            </FormItem>
            <FormItem label="退货-国家" prop="country">
                <Input v-model="logistics.country" placeholder="从<面单信息>获取到的..."></Input>
            </FormItem>
            <FormItem label="退货-省份" prop="province">
                <Input v-model="logistics.province" placeholder="从<面单信息>获取到的..."></Input>
            </FormItem>
            <FormItem label="退货-城市" prop="city">
                <Input v-model="logistics.city" placeholder="从<面单信息>获取到的..."></Input>
            </FormItem>
            <FormItem label="退货-地区" prop="district">
                <Input v-model="logistics.district" placeholder="从<面单信息>获取到的..."></Input>
            </FormItem>
            <FormItem label="退货-地址" prop="detail">
                <Input v-model="logistics.detail" placeholder="从<面单信息>获取到的..."></Input>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showModalStatus = false">取消</Button>
                <Button type="primary" @click="createLogistic('logisticsValidate')">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
    <!-- 修改的弹出 -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="修改店铺" width="640" v-model="showEditModalStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="logistics" ref="logisticsValidate" label-position="right" :label-width="80" :rules="logisticsValidate" action="javascript:void(0)">
            <FormItem label="类型" prop="type">
                <Select v-model="logistics.type" :style="{'width':'240px'}" clearable>
                    <Option v-for="item in typelist" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
            </FormItem>
            <FormItem label="门店" prop="shop_id">
                <Select v-model="logistics.shop_id" :style="{'width':'240px'}" clearable>
                    <Option v-for="item in shoplist" :value="item.id" :key="item.id">{{ item.shopname }}</Option>
                </Select>
            </FormItem>
            <FormItem label="公司名称" prop="logistics_company">
                <Input v-model="logistics.logistics_company" placeholder="输入名称..."></Input>
            </FormItem>
            <FormItem label="公司编码" prop="logistics_id">
                <Input v-model="logistics.logistics_id" placeholder="输入公司编码，从平台获取到的..."></Input>
            </FormItem>
            <FormItem label="公司代码" prop="logistics_code">
                <Input v-model="logistics.logistics_code" placeholder="输入公司代码，从平台获取到的..."></Input>
            </FormItem>
            <FormItem label="面单模板名称" prop="standard_template_name">
                <Input v-model="logistics.standard_template_name" placeholder="从<面单模板>获取到的..."></Input>
            </FormItem>
            <FormItem label="面单模板URL" prop="standard_template_url">
                <Input v-model="logistics.standard_template_url" placeholder="从<面单模板>获取到的..."></Input>
            </FormItem>
            <FormItem label="退货-国家" prop="country">
                <Input v-model="logistics.country" placeholder="从<面单信息>获取到的..."></Input>
            </FormItem>
            <FormItem label="退货-省份" prop="province">
                <Input v-model="logistics.province" placeholder="从<面单信息>获取到的..."></Input>
            </FormItem>
            <FormItem label="退货-城市" prop="city">
                <Input v-model="logistics.city" placeholder="从<面单信息>获取到的..."></Input>
            </FormItem>
            <FormItem label="退货-地区" prop="district">
                <Input v-model="logistics.district" placeholder="从<面单信息>获取到的..."></Input>
            </FormItem>
            <FormItem label="退货-地址" prop="detail">
                <Input v-model="logistics.detail" placeholder="从<面单信息>获取到的..."></Input>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showEditModalStatus = false">取消</Button>
                <Button type="primary" @click="editLogistics('logisticsValidate')">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
    <!-- 展示所有物流信息的列表 -->
    <Drawer :closable="true" :mask-closable="true" :scrollable="true" title="平台支持的物流" width="640" v-model="showLogisticsModalStatus">
        <Table border ref="logistics" :columns="llist" :data="logisticslist" :loading="logisticsloading"></Table>
    </Drawer>
    <!-- 查询面单服务订购及面单使用情况 -->
    <Drawer :closable="true" :mask-closable="true" :scrollable="true" title="退货地址" width="640" v-model="showWaywillModalStatus">
        <Table border ref="logistics" :columns="waylist" :data="waywilllist" :loading="logisticsloading">
            <template slot-scope="{row, index }" slot="address">
                {{ row.country }} - {{ row.province }} - {{ row.city }} - {{ row.district }} - {{ row.detail }}
            </template>
        </Table>
    </Drawer>
    <!-- 面单模板 -->
    <Drawer :closable="true" :mask-closable="true" :scrollable="true" title="面单模板" width="640" v-model="showTempModalStatus">
        <Table border ref="logistics" :columns="templist" :data="templatelist" :loading="logisticsloading">
            <template slot-scope="{row, index }" slot="template">
                <ul>
                    <li v-for="item in row.standard_templates" :key="item.standard_template_id">
                        {{ item.standard_template_name }} - {{ item.standard_template_url }}
                    </li>
                </ul>
            </template>
        </Table>
    </Drawer>
</div>
</template>

<script>
export default {
    name: 'Logistics',
    data() {
        return {
            dataloading: false,
            logisticsloading:false,
            loading:false,
            formItem: {
                'shop_id':0,
                'type':0,
                'key': ''
            },
            pages: {
                current: 1,
                total: 0,
                size: 10
            },
            list: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                },
                {
                    title: '平台',
                    width: 100,
                    slot: 'type',
                },
                {
                    title: '名称',
                    minWidth: 80,
                    key: 'logistics_company',
                },
                {
                    title: '物流代码',
                    width: 100,
                    key: 'logistics_id',
                },
                {
                    title: '物流代码',
                    width: 100,
                    key: 'logistics_code',
                },
                {
                    title: '模板',
                    slot: 'template',
                },
                {
                    title: '地址',
                    slot: 'address',
                },
                {
                    title:'操作',
                    width:130,
                    slot:'action'
                }
            ],
            llist:[
                {
                    title: '名称',
                    minWidth: 200,
                    key: 'logistics_company',
                },
                {
                    title: '物流代码',
                    width: 150,
                    key: 'logistics_id',
                },
                {
                    title: '物流代码',
                    width: 150,
                    key: 'logistics_code',
                }
            ],
            logisticslist:[],
            waylist:[
                {
                    title: '名称',
                    width: 100,
                    key: 'wp_code',
                },
                {
                    title: '地址',
                    slot: 'address',
                }
            ],
            waywilllist:[],
            templist:[
                {
                    title: '公司',
                    width: 100,
                    key: 'wp_code',
                },
                {
                    title: '模板',
                    slot: 'template',
                }
            ],
            templatelist:[],
            tablelist: [],
            typelist:[
                {'id':1,'name':'天猫'},
                {'id':2,'name':'淘宝'},
                {'id':3,'name':'京东'},
                {'id':4,'name':'拼多多'},
            ],
            showModalStatus:false,
            showEditModalStatus:false,
            showLogisticsModalStatus:false,
            showWaywillModalStatus:false,
            showTempModalStatus:false,
            logistics_id:0,
            logistics: {
                shop_id:'0',
                type: '0',
                logistics_company: '',
                logistics_id: '',
                logistics_code: '',
                standard_template_name: '',
                standard_template_url: '',
                country: '',
                province: '',
                city: '',
                district: '',
                detail: '',
            },
            logisticsValidate: {
                type: [
                    { required: true, type: 'integer', message: '类型必须填写', trigger: 'change' }
                ],
                logistics_company: [
                    { required: true, message: '名称必须填写', trigger: 'blur' }
                ],
                logistics_id: [
                    { required: true, message: '公司编码必须填写', trigger: 'blur' }
                ],
                logistics_code: [
                    { required: true, message: '公司代码必须填写', trigger: 'blur' }
                ]
            },
            shoplist:[],
        }
    },
    created: function() {
        // 取数据
        this.getTableList();
        this.$api.shop.list({size:100000,page:1}).then(res => {
            if (res.code == 200) {
                this.shoplist = res.result.list;
            }
        });
    },
    // 组件
    components: {
    },
    methods: {
        changePage() {
            this.pages.current = this.$refs['listPage'].currentPage;
            this.getTableList();
        },
        // 选择id
        changeData: function(index) {
            this.selectData = index
        },
        getTableList: function() {
            var params = { page: this.pages.current,'size':this.pages.size};
            this.$api.logistics.list(params).then(res => {
                this.dataloading = false;
                if (res.code == 200) {
                    this.tablelist = res.result.list;
                    this.pages.total = res.result.total
                    this.$Message.success(res.message);
                }
            });
            return;
        },
        // 筛选
        renderTable: function(name) {
            this.dataloading = true;
            this.pages.currentPage = 1;
            var ps = { 'key': this.formItem.key,'type': this.formItem.type,'page':1 ,size:this.pages.size};
            this.$api.logistics.list(ps).then(res => {
                this.dataloading = false;
                if (res.code == 200) {
                    this.tablelist = res.result.list;
                    this.pages.total = res.result.total
                    this.$Message.success(res.message);
                }
            });
            return;
        },
        showCreateLogistic:function(){
            this.showModalStatus = !this.showModalStatus;
            this.logistics = {
                shop_id:'0',
                type: '0',
                logistics_company: '',
                logistics_id: '',
                logistics_code: '',
                standard_template_name: '',
                standard_template_url: '',
                country: '',
                province: '',
                city: '',
                district: '',
                detail: '',
            };
        },
        // 添加
        createLogistic(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.$api.logistics.create(this.logistics).then(res => {
                        if (res.code == 200) {
                            this.getTableList();
                            this.showModalStatus = !this.showModalStatus;
                        }
                        this.loading = false;
                    }).finally(res => {
                        this.loading = false;
                    });
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        showEditLogistics:function(id){
            this.logistics_id = id;
            this.loading = true;
            this.$api.logistics.detail({logistics_id:id}).then(res => {
                if (res.code == 200) {
                    this.logistics = res.result
                    this.loading = false;
                }
            })
            this.showEditModalStatus = !this.showEditModalStatus;
        },
        editLogistics:function(name){
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.logistics.l_id = this.logistics_id
                    this.$api.logistics.edit(this.logistics).then(res => {
                        if (res.code == 200) {
                            this.getTableList();
                            this.showEditModalStatus = !this.showEditModalStatus;
                        }
                        this.loading = false;
                    }).finally(res => {
                        this.loading = false;
                    });
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        // 删除
        remove: function(index, id) {
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                this.$api.logistics.remove({ logistics_id: [id] }).then(res => {
                    if (res.code == 200) {
                        this.$Message.success(res.message);
                        this.tablelist.splice(index, 1);
                    }
                });
                }
            });
        },
        removeLogistic:function () {
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                    var ids = [];
                    this.selectData.forEach((item, index) => {
                        ids.push(item.id);
                    })
                    this.$api.logistics.remove({ logistics_id: ids }).then(res => {
                        if (res.code == 200) {
                            this.$Message.success(res.message);
                            this.getTableList();
                        }
                    });
                }
            });
        },
        // 同步拼多多
        syncpdd:function(){
            this.showLogisticsModalStatus = !this.showLogisticsModalStatus;
            this.logisticsloading = true;
            this.$api.logistics.syncpdd().then((res)=>{
                this.$Message.success(res.message);
                this.logisticslist = res.result;
                this.logisticsloading = false;
                console.log(res.result);
            });
            return;
        },
        syncwaywill:function(){
            this.showWaywillModalStatus = !this.showWaywillModalStatus;
            this.logisticsloading = true;
            this.$api.logistics.syncwaywill({shop_id:this.formItem.shop_id}).then((res)=>{
                this.$Message.success(res.message);
                this.waywilllist = res.result;
                this.logisticsloading = false;
                console.log(res.result);
            });
            return;
        },
        synctemp:function(){
            this.showTempModalStatus = !this.showTempModalStatus;
            this.logisticsloading = true;
            this.$api.logistics.synctemp({shop_id:this.formItem.shop_id}).then((res)=>{
                this.$Message.success(res.message);
                this.templatelist = res.result;
                this.logisticsloading = false;
                console.log(res.result);
            });
            return;
        },
    }
}
</script>
